<template>
    <div class="toast">
        <i :class="getType"></i>
        <span>{{toastMsg}}</span>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    data() {
        return {};
    },
    computed: {
        getType() {
            if (this.toastType == "success") {
                return "iconfont icon-toast_chenggong";
            } else if (this.toastType == "warning") {
                return "iconfont icon-toast-jinggao";
            } else {
                return "iconfont icon-toast-shibai_huaban";
            }
        },
        ...mapState({
            toastMsg: (state) => state.showToast.toastMsg,
            toastType: (state) => state.showToast.toastType,
        }),
    },
};
</script>
 
<style lang = "less" scoped>
.toast {
    position: fixed;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    left: 50%;
    top: 3px;
    transform: translateX(-50%);
    border-radius: 10px;

    .iconfont {
        margin-right: 10px;
    }

    .icon-toast-shibai_huaban {
        color: red;
    }

    .icon-toast_chenggong {
        color: green;
    }

    .icon-toast-jinggao {
        color: orange;
    }
}
</style>